<template>
  <div>
      <h1>
          我是{{count.name}},我的性别是{{changeCount}},我的年龄是{{count.age}}
      </h1>
      <button @click="setCount">点击更改性别</button>
      <button @click="setCountWait">再等两秒我就长大啦</button>
      <hr>
      <button @click="getMovie">点击获取电影列表</button>
      <ul>
          <li v-for="movie in movieList" :key="movie.tvid">{{movie.albumName}}</li>
      </ul>
      <hr>
      <ul>
          <li v-for="movie in diyList" :key="movie.tvid">{{movie.albumName}}</li>
      </ul>

  </div>
</template>

<script>
import { mapActions, mapGetters, mapMutations, mapState } from 'vuex'
export default {
    name:"Header",
    computed:{
        ...mapState("count",['count']),

        ...mapGetters("count",["changeCount"]),

        ...mapState("movie",['movieList']),

        ...mapGetters("movie",['diyList'])
    },
    methods:{
        ...mapMutations("count",["setCount"]),  
        ...mapActions("count",['setCountWait']),
        ...mapActions("movie",['getMovie'])
    }
}
</script>

<style>

</style>